<template>
  <el-container direction="vertical">
    <el-row>
      <el-container class="full-width" style="height: 60px" direction="horizontal">
        <el-row class="full-width shadow-base container-border">
          <div class="left" style="width: 200px">
            <a href="#" style="vertical-align: middle;background-color: white;width: 200px;height: 60px;line-height: 60px" >
              <img src="../../assets/images/brand.png" class="full-width" alt="考试星" style="padding:0 20px;box-sizing:border-box;vertical-align: middle">
            </a>
          </div>
          <div class="right container-border box-border" style="padding: 0 300px 0 200px;">
            <router-view name="nav" @operate="handleOperate"></router-view>
          </div>
          <div class="addition">
            {{$store.state.user.user.email}}
          </div>
        </el-row>
      </el-container>
    </el-row>
    <div class="content-wrap">
      <aside-nav  class="fl" v-model="asideWidth"></aside-nav>
      <div class="content box-border" :style="{marginLeft:asideWidth + 'px',paddingRight:asideWidth + 'px'}" >
        <router-view name="content" :operation="operateEvent"/>
      </div>
    </div>
  </el-container>
</template>

<script>
// @ is an alias to /src
import AsideNav from '../app/AsideNav'

export default {
  name: 'home',
  data () {
    return {
      asideWidth: 200,
      /**
       * 操作的事件
       */
      operateEvent: {
        event: '',
        count: 0
      }
    }
  },
  components: {
    AsideNav
  },
  methods: {
    handleOperate (event) {
      this.operateEvent.event = event
      this.operateEvent.count++
    }
  }
}
</script>

<style scoped lang="less">
  @import url(../../assets/css/common);
  #aside{
    background-color: #545c64;
  }

  .content-wrap{
    position: relative;
    width: 100%;
    height: 100%;
    .aside-nav{
      height: 100%;
    }
    .content{
      width: 100%;
      height: 100%;
      position: absolute;
    }
  }

  .addition{
    width: 300px;
    font-size: 20px;
    line-height: 60px;
    float: right;
    text-align: center;
    position: relative;
    z-index: 100;
  }
  .addition:hover{
    color: @brand;
    cursor: pointer;
  }

</style>
